import { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import './myyouhuiquan.css'
import Youhuiquan from './youhuiquan';
import YouhuiquanTow from './youhuiquanTow';
import app from '../../main.js'
import { type } from 'os';

export default class Myouhuiquan extends Component {

  config = {
    navigationBarTitleText: '爱眼医生'
  }
  constructor() {
    super(...arguments)
    this.state = {
      //标签页切换值
      current: 0,
      //优惠券数据 将会从接口中获取 并且将其值替换城改数组的值  如果麻烦就取该自定义组件属性名
      //接口值
      arr1: [
        // {
        //   "code":"",
        //   "id":"1",
        //   "title":"满100减10元",
        //   "desc":null,
        //   "coupon_type":"满减",
        //   "use_type":"开始日期结束日期",
        //   "start_time":"2019-04-01 14:26:17",
        //   "end_time":"2019-08-20 14:10:48",
        //   "days":"30",
        //   "scope":"全订单可用",
        //   "product_type":"非定向问诊",
        //   "full_money":"100.00",
        //   "discount":"10.00",
        //   "amount":"100",
        //   "created_at":"0000-00-00 00:00:00",
        //   "status":"未使用"
        // }
      ],
      arr2: [
        // {
        //   "id": 1,
        //   "title": "在线抵用券",
        //   "start_time": "2016-12-12 12:00:00",
        //   "end_time": "2016-12-14 12:00:00",
        //   "use_type": "立即使用",
        //   "scope": "全平台",
        //   "coupon_type": "满减",
        //   "full_money": 100,
        //   "discount": 100,
        //   "coupon_id": 1,
        //   "code": "123123",
        //   "status": "已使用"
        // }
      ],
      arr3: [
        // {
        //   "id": 1,
        //   "title": "在线抵用券",
        //   "start_time": "2016-12-12 12:00:00",
        //   "end_time": "2016-12-14 12:00:00",
        //   "use_type": "立即使用",
        //   "scope": "全平台",
        //   "coupon_type": "满减",
        //   "full_money": 100,
        //   "discount": 100,
        //   "coupon_id": 1,
        //   "code": "123123",
        //   "status": "已过期"
        // }
      ],
    }
  }
  //该事件为标签页切换事件
  handleClick(value) {
    this.setState({
      current: value
    })
  }
  // 数据整理 得到横批
  handleDateDo(start_time, end_time) {
    let nowdate = new Date()
    //开始时间-当前时间 < 一天 为新到 反之为将到期、
    //(使用时间 = 当前时间) - 结束时间 > 0  为已过期反之为已使用或为使用
    //1 新到 2 将到期 0 默认86400000
    let start = new Date(start_time) - nowdate
    let end = new Date(end_time) - nowdate
    if (start >= -86400000 && start < 0) {
      return "新到"
    } else if (end <= 86400000 && end > 0) {
      return "将到期"
    } else {
      return null
    }
  }

  // 优惠类型
  Transformation(value){
    let new_value = parseInt(value)/10
    return new_value;
  }

  //该事件为详情跳转事件
  goto(connpId,status,is_use) {
    app.navigateTo('../myConnp/myConnp'+'?id='+connpId+'&status='+status+"&is_use="+is_use);
  }

  length = 20

  offect = 0
  total = 0

  // 数据获取 (未使用优惠券)
  getDate() {
    let me = this
    let data = {offset: this.offect, length: this.length }
    let dataArray = []
    app.get('web/coupon/no_use_list', data, function (res) {
      dataArray = me.state.arr1.concat(res.data.result.list)
      dataArray.map((item)=>{
          if(item.coupon_type == "折扣"){
            item.discount = me.Transformation(item.discount)
          }
          if(item.end_time == '' || item.end_time == undefined || item.end_time == null){
             item.end_time = '无'
          }else{
            item.end_time = item.end_time.slice(0,10)
          }
      })
      me.total = res.data.result.total
      me.setState({ 
        arr1: dataArray
      })
    })
  }
  // 已使用优惠券
  offect2 = 0
  total2 = 0
  getDate2() {
    let me = this
    let data = {offset: this.offect2, length: this.length }
    let dataArray = []
    app.get('web/coupon/used_list', data, function (res) {
      dataArray = me.state.arr2.concat(res.data.result.list)
      dataArray.map((item)=>{
        if(item.coupon_type == "折扣"){
          item.discount = me.Transformation(item.discount)
        }
        if(item.end_time == '' || item.end_time == undefined || item.end_time == null){
             item.end_time = '无'
        }else{
             item.end_time = item.end_time.slice(0,10)
        }
    })
      me.total = res.data.result.total
      me.setState({
        arr2: dataArray
      })
    })
  }
  // 已过期优惠券
  offect3 = 0
  total3 = 0
  getDate3() {
    let me = this
    let data = {offset: this.offect3, length: this.length }
    let dataArray = []
    app.get('web/coupon/expired_list', data, function (res) {
      dataArray = me.state.arr3.concat(res.data.result.list)
      dataArray.map((item)=>{
        if(item.coupon_type == "折扣"){
          item.discount = me.Transformation(item.discount)
        }
        if(item.end_time == '' || item.end_time == undefined || item.end_time == null){
             item.end_time = '无'
        }else{
             item.end_time = item.end_time.slice(0,10)
        }
    })
      me.total = res.data.result.total
      me.setState({
        arr3: dataArray
      })
    })
  }
  上拉加载
  onReachBottom() {
    switch (this.state.current) {
      case 0:
        if (this.offect + this.length < this.total) {
          app.toast("正在加载...")
          this.offect = this.offect + this.length
          this.getDate1()
        } else {
          app.toast("没有耕读数据了")
        }
        break;
      case 1:
        if (this.offect2 + this.length < this.total2) {
          app.toast("正在加载...")
          this.offect2 = this.offect2 + this.length
          this.getDate2()
        } else {
          app.toast("没有耕读数据了")
        }
        break;
      case 2:
        if (this.offect2 + this.length < this.total2) {
          app.toast("正在加载...")
          this.offect3 = this.offect3 + this.length
          this.getDate3()
        } else {
          app.toast("没有耕读数据了")
        }
        break;
      default:
        console.log('发生了不可知情况')
        break;
    }
  }

  // init() {
  //   this.getDate();
  //   this.getDate2();
  //   this.getDate3();
  // }

  componentDidMount() {
    this.getDate();
    this.getDate2();
    this.getDate3();
  }

  render() {
    const tabList = [{ title: '未使用' }, { title: '已使用' }, { title: '已过期' }]
    // 横批注解
    let resa = this.state.arr1.map((item) => {
      return this.handleDateDo(item.start_time, item.end_time)
    })

    //未使用
    let one = this.state.arr1.map((item,index)=>{
                   return <View className='myTaro' style='overflow:hidden'>
                        <Youhuiquan textinfo={item} onXiangqing={this.goto.bind(this,item.id,tabList[0].title,item.status)}/>
                        {/* {resa[index] == '新到' && <View className='hengpi2'><Text className='hengpi-text'>{res[index]}</Text></View>}
                        {resa[index] == "将到期" && <View className='hengpi'><Text className='hengpi-text'>{res[index]}</Text></View>} */}
                   </View>
               })

    //已使用
    let two = this.state.arr2.map((item)=>{
                return <View className="myTaro" style="overflow:hidden">
                     <YouhuiquanTow textinfo={item} onXiangqing={this.goto.bind(this,item.id,tabList[1].title,item.status)} />  
               </View>
              })
 
    //已过期
    let three = this.state.arr3.map((item)=>{
                  return <View className='myTaro' style='overflow:hidden'>
                      <YouhuiquanTow textinfo={item} onXiangqing={this.goto.bind(this,item.id,tabList[2].title,item.status)}/>
                  </View>
                })

    return (
      <View>
          <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
               <AtTabsPane current={this.state.current} index={0}>
                   {one}
               </AtTabsPane>
               <AtTabsPane current={this.state.current} index={1}>
                   {two}
               </AtTabsPane>
               <AtTabsPane current={this.state.current} index={2}>
                   {three}
               </AtTabsPane>
          </AtTabs>
      </View>
    )
  }
}